<template>
	<div id="business">
		<v-header :shopInfo="shopInfo"></v-header>
        <div style="padding: 0.6rem 0 0.6rem 0;width: 100%;margin-top: .2rem; overflow: hidden;background: #fff">
            <div class="new">
                <span>全部商品</span>
            </div>
        </div>
        <div class="classifyTitle">
            <ul>
                <li @click="jump(5)" :class="flag == 5 ? 'active': '' ">综合</li>
                <li @click="jump(4)" :class="flag == 4 ? 'active': '' ">新品</li>
                <li @click="jump(3)" :class="flag == 3 ? 'active': '' ">销量</li>
                <li @click="jump(1)" :class="flag == 1 ? 'active': '' ">价格
                    <img :src="changeImg==0?'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/change/WechatIMG85.png':(changeImg==1?'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/change/price_increases.png':'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/change/price_drops.png')">
                </li>
            </ul>
        </div>
        <div class="newProduct">
            <div class="newProductListWrapper">
                <section>
                    <div :class="y%2==0?'newProductList flo-l':'newProductList flo-r'" v-for="(x,y) in proList" :id_type="x.id_type" :pro_id="x.pro_id" @click="goNewDetail($event)">
                        <header>
                            <dl>
                                <dd><img :src="x.pro_img"></dd>
                                <dt style="text-align: left">{{x.subtitle}}</dt>
                            </dl>
                        </header>
                        <footer>
                            <div>
                                <span class="priceColor flo-l"></span>
                                <span class="flo-l">
                                    <span class="priceColor">￥{{x.lowest_price}}</span>
                                </span>
                                <span class="flo-r" style="color: #969696;">已砍{{x.pro_sells}}件</span>
                            </div>
                        </footer>
                    </div>
                </section>
            </div>
        </div>
	</div>
</template>

<script>
	import config from "../config/config.js";
	import Header from "./header.vue";
    import share from "../share/share.js";
    import MtaH5 from 'mta-h5-analysis';
	export default{
		data(){
			return{
               shopid:Number,
			   orderType:5,
               flag:5,
               proList:[],
               shopInfo:{},
                changeImg:0
			}
		},
		components:{
			"v-header":Header,
		},
        methods: {
            jump(index){
                this.flag = index;
                if(index==1){
                    this.reverseOrder()
                };

            },
            GetSellerInfo(shopid,orderType){
                var value=JSON.stringify({"shopid":shopid,"orderType":orderType,"page":1,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/seller/GetSellerInfo',{
                        value:value,
                        key:key
                },config)
                    .then(function(response) {
                        if(response.data.code==200){
                            this.proList=response.data.data.data.proList;
                            this.shopInfo=response.data.data.shopInfo;
                        }
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
			},
            reverseOrder(){
                if(this.orderType==1){
                    this.orderType=2;
                    this.GetSellerInfo(this.shopid,this.orderType);
                }else{
                    this.orderType=1;
                    this.GetSellerInfo(this.shopid,this.orderType);
                };
                if(this.changeImg==0){
                    this.changeImg =1
                }else if(this.changeImg==1){
                    this.changeImg =2
                }else{
                    this.changeImg =1
                }
            },
            collection(){
                var value=JSON.stringify({"type":2,"valueId":this.$route.params.shopId,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/Collection/UpdateCollection',{
                        value:value,
                        key:key
                },config)
                    .then(function(response) {
                            if(response.data.code==200){
                                if(response.data.data.status==-1){
                                    this.shopInfo.isCollection=2
                                }else{
                                    this.shopInfo.isCollection=1
                                }
                            }

                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            goNewDetail($event){
                var id=$event.currentTarget.getAttribute('pro_id'),
                    type=$event.currentTarget.getAttribute('id_type');
                this.$router.push('/newDetail/'+id+'/'+type)
            },
            gozhichi(){
                window.location.href='https://www.sobot.com/chat/h5/index.html?sysNum=8aa3c6e204e843ce93d80c7b9208d4e6'
            }
    	},
		activated(){
		    this.shopid=this.$route.params.shopId;
		    this.GetSellerInfo(this.shopid,this.orderType);
		    share({});
            MtaH5.init({
                "sid":'500594815',
                "cid":'500595819',
                "autoReport":0,
                "senseHash":0,
                "senseQuery":0,
                "performanceMonitor":0,
                "ignoreParams":[]
            });
            MtaH5.pgv();
		},
        watch:{
            "flag":function(){
                    this.orderType=this.flag;
                    this.shopid=this.$route.params.shopId;
                    this.GetSellerInfo(this.shopid,this.orderType);
            }
        }
    }
</script>

<style>
</style>